<template>
	<view class="container">
		<!-- 物业缴费详情页面-顶部布局 -->
		<view style="width: 100%; height: 200rpx; display: inline-flex; flex-direction: row; position: absolute">
			<view style="width: 16rpx"></view>
			<image src="/static/assets/property_charge_bg.png" style="width: auto; flex-grow: 1; height: 200rpx"></image>
			<view style="width: 16rpx"></view>
		</view>

		<!-- 收款单位 顺和国际 -->
		<view style="display: flex; flex-direction: column; height: 200rpx; position: absolute; justify-content: center; left: 40rpx">
			<view style="color: #fff; font-size: 26rpx">已完成缴费</view>
			<view style="color: #fff; font-size: 40rpx; margin-top: 10rpx">￥{{ detail.amount_paid }}</view>
		</view>

		<!-- 占位 -->
		<view style="width: 100%; height: 200rpx"></view>

		<!-- 水费 已支付 -->
		<view style="display: flex; flex-direction: row; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 60rpx">
			<view style="color: #000; font-size: 36rpx">物业费</view>
			<view style="color: #999; font-size: 26rpx">已支付</view>
		</view>

		<!-- 图标 房间名 -->
		<view style="display: flex; flex-direction: row; align-items: center; margin-left: 20rpx; margin-top: 60rpx">
			<image src="/static/assets/house_16.png" style="width: 26rpx; height: 32rpx"></image>
			<view style="color: #000; font-size: 30rpx; margin-left: 20rpx; flex-grow: 1">{{ detail.name }}</view>
			<view style="color: #00be6e; font-size: 28rpx; margin-left: 20rpx; margin-right: 20rpx">面积：{{ detail.total_area }}㎡</view>
		</view>

		<!-- 分割线 -->
		<view style="background-color: #e5e5e5; margin-left: 20rpx; margin-right: 20rpx; height: 1rpx; margin-top: 16rpx"></view>

		<!-- 循环获取各类费用 -->
		<view :data-index="index" v-for="(item, index) in detail.info" :key="index">
			<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
				<view style="color: #999; font-size: 28rpx">{{ item.name }}：</view>
				<view style="color: #999; font-size: 28rpx">￥{{ item.price }}</view>
			</view>
		</view>

		<!-- 收款单位 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">收款单位：昊昀物业</view>
		</view>

		<!-- 费用范围 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 26rpx">费用范围：{{ detail.starttime }}到{{ detail.endtime }}</view>
		</view>

		<!-- 缴费时间 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">缴费时间：{{ detail.pay_time }}</view>
		</view>

		<!-- 分割线 -->
		<view style="background-color: #e5e5e5; margin-left: 20rpx; margin-right: 20rpx; height: 1rpx; margin-top: 16rpx"></view>

		<!-- 订单编号 -->
		<view style="display: flex; justify-content: space-between; margin-left: 20rpx; margin-right: 20rpx; margin-top: 20rpx">
			<view style="color: #999; font-size: 28rpx">订单编号：{{ detail.number }}</view>
		</view>
	</view>
</template>

<script>
	const app = getApp(); // 获取应用实例
	import { getRecordDetail } from '../../../utils/http/api'
	export default {
		data() {
			return {
				/** 物业费明细数据格式
				 * {id:'',name:'',owner_name:'',owner_tel:'',total_area:'',number:'',pay_time:''，}
				 */
				detail: {
					amount_paid: '',
					name: '',
					total_area: '',
					info: [],
					starttime: '',
					endtime: '',
					pay_time: '',
					number: ''
				},

				id: ''
			};
		},
		onLoad: function(options) {
			this.setData({ id: options.id })
			this.reqChargeDetail()
		},

		methods: {
			// 请求缴费明细
			async reqChargeDetail() {
				let that = this;
				let url = app.globalData.gl.url + 'index.php/api/house_user/finance_details'
				uni.showLoading({ title: '加载中', mask: true })
				let { code, msg, data } = await getRecordDetail({ token: app.globalData.gl.token, id: that.id })
				if (code == '1') {
					that.setData({ detail: data.data })
				} else {
					uni.showToast({ title: msg, icon: 'none' })
				}
			}
		}
	};
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
	}
</style>